<template>
  <div class="tinymce-container">
    <el-form ref="form">   
      <el-form-item label="课程标题"  label-width="100px">
        <el-input v-model="course.courseName"></el-input>
      </el-form-item>
      <el-form-item label="课程描述"  label-width="100px">
        <el-input v-model="course.description" type="textarea" rows="10"></el-input>
      </el-form-item>
      <el-form-item label="课程标签"  label-width="100px">
        <el-input v-model="course.keyword"></el-input>
      </el-form-item>

      <el-form-item label="课程分类" label-width="100px">
        <el-select v-model="course.typeId" placeholder="请选择课程分类">
          <el-option
                v-for="item in sourcetype_list"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"
              ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="封面"  label-width="100px">
        <div class="single_pic" @click="selectSinglePic">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#icon_btn_addpic" />
          </svg>
          <span>选择图片</span>
          <img v-if="course.image" :src="course.image" />
        </div>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="success" class="filter-item" @click="addCourseInfo()">
          <svg class="icon svg-icon" aria-hidden="true">
            <use xlink:href="#iconicon_btn_tjsh" />
          </svg>
          保存课程
        </el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      width="849px"
      :visible.sync="showPicDialog"
      :close-on-click-modal="false"
      :show-close="false"
      :center="true"
    >
      <!-- 本地上传 -->
      <div>
        <upload :imgChange="uploadSuccess" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="warning" @click="cancleImg">取 消</el-button>
        <el-button type="success" @click="btnOKImg">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Upload from '@/components/Upload/upload.vue'
import {getSourceTypes,addCourse} from '@/api/publish'

export default {
  name: 'PublishCourse',
  components: { Upload },
  data () {
    return {
      singlePic: null, // 单图模式
      sourcetype_list: [],
      selectedImg:'',
      course:{
        typeName:'',//分类名字
        typeId:'',//分类ID
        courseName:'',//课程名字
        image:'',//课程图片
        keyword:'',//标签、关键词
        description:''//描述
      },
      showPicDialog:false,//弹层
    }
  },
  beforeMount () {
    this.getSourceType() // 拉取分类列表
  },
  methods: {
    // 获取文章频道
    async getSourceType () {
      const result = await getSourceTypes()
      this.sourcetype_list = result.data
    },

    //获取指定id的分类
    oneSourceType(id){
      for(var i=0;i<this.sourcetype_list.length;i++){
        let courseType = this.sourcetype_list[i]
        if(courseType.id==id){
          return courseType
        }
      }
    },

    //添加文章
    async addCourseInfo () {
      let courseType = this.oneSourceType(this.course.typeId)
      this.course.typeName=courseType.typeName
      const result = await addCourse(this.course)
      if (result.code === 20000) {
          // 写多了if  else 写个三元表达式 换换口味
          this.$message({ type: 'success', message: '发布成功' })
          //进入列表页
          this.$router.push({ path: '/course/list'})
        } else {
          this.$message({ type: 'error', message: result.message })
        }
    },
    // 上传成功后
    uploadSuccess (url) {
      this.selectedImg =  url  // 将上传的图片认为是新组件
    },
    // 选择单张图片
    selectSinglePic () {
      this.showPicDialog = true // 显示弹层
    },
    // 取消插入图片
    cancleImg () {
      this.showPicDialog = false // 关闭弹层
    },
    // 插入图片 或者替换封面图片
    btnOKImg () {
      this.course.image=this.selectedImg //图片替换
      this.selectedImg = '' // 首先清空选择的缓存
      this.showPicDialog = false // 关闭弹层
    },
  }
}
</script>

<style lang="scss" scoped>
@import '@/scss/element-variables.scss';

.tinymce-container {
  padding: 30px;
  text-align: left;

  .el-form {
    .title {
      .el-input__inner {
        padding: 0;
        padding-bottom: 19px;
        border: none;
        border-bottom: 2px solid #ebeef5;
        border-radius: 0;
        line-height: 26px;
        font-size: 20px;
        color: $--color-text-placeholder;
      }
    }

    // .el-form-item {
    //   margin: 20px 0;
    // }

    .btn {
      border-top: 2px solid #ebeef5;
      // margin: 0 15px;
      // padding: 30px 0;
      padding-top: 31px;
      margin-bottom: 0;
    }
  }
}

.editor-content {
  margin-top: 20px;
}

.img_list {
  width: 155px;
  height: 103px;
  float: left;
  margin: 0px auto;
  border: 1px solid #eee;
  overflow: hidden;
  border-radius: 4px;
  margin: 0px 18px 16px 0;
  position: relative;
}

.img_list_con {
  flex: 1;
  overflow: hidden;
  margin-left: 30px;
  max-height: 340px;
}

.selected {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px !important;
  height: 33px !important;
}

.img_list img {
  width: 155px;
  height: 103px;
  display: block;
  cursor: pointer;
}

.pagination {
  text-align: center;
}

.upload_pic_show {
  display: block;
  width: 240px;
  height: 180px;
  margin: 15px auto 10px;
}

.single_pic {
  width: 278px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 2px dashed $--border-color-base;
  border-radius: 4px;
  cursor: pointer;
}

.three_pic {
  display: flex;
  flex-direction: row;
  width: 840px;
  height: 180px;
  cursor: pointer;

  .three_pic_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed $--border-color-base;
    border-right: none;
  }

  .three_pic_item:last-child {
    border-right: 2px dashed $--border-color-base;
  }
}

.single_pic:hover, .three_pic_item:hover {
  color: $--color-primary;
}

.single_pic .icon, .three_pic .three_pic_item .icon {
  width: 40px;
  height: 40px;
}

.single_pic span, .three_pic .three_pic_item span {
  line-height: normal;
}

.single_pic img, .three_pic .three_pic_item img {
  width: 278px;
  height: 180px;
  object-fit: cover;
}

.el-switch {
  height: auto;
  margin-bottom: 30px;
}

.el-switch__label {
  position: absolute;
  color: $--color-text-secondary;
}

.el-switch__label.is-active {
  color: $--color-text-primary;
  font-weight: 600;
}

.el-switch__label--left {
  left: 0;
  margin-left: 16px;
  z-index: 9999;
}

.el-switch__label--right {
  right: 0;
  margin-right: 10px;
}

.el-switch__core {
  height: 40px;
  border-radius: 4px;
}

.el-switch__core:after {
  width: 66px;
  height: 32px;
  top: 3px;
  left: 3px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

.el-switch.is-checked .el-switch__core::after {
  margin-left: 76px;
  left: 3px;
}

.el-dialog__footer {
  border-top: 2px solid #EBEEF5;
}
.el-select{
  width: 100%;
}
</style>
